<!DOCTYPE html>
<html lang="en" class="page-fill" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>添加车辆</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/css/oksub.css">
	<script type="text/javascript" src="/lib/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<form class="layui-form layui-form-pane ok-form" id="form" lay-filter="form">

		<input type="hidden" name="serialId">
		<input type="hidden" name="offerTypeId">

		<div class="layui-form-item">
			<div class="layui-collapse">
				<div class="layui-colla-item">
					<h2 class="layui-colla-title">录入说明</h2>
					<div class="layui-colla-content layui-show">
						<p style="font-family:verdana;color:#FF6666">
							录入寄件区间，目的区间，快件类型，物品类型，客户类型不可以为空，
							以上信息可以重复，但是要求组合起来不可以重复，否则计算公式按照先录入的信息使用
						</p>
					</div>
				</div>
			</div>
			<label class="layui-form-label">快件类型</label>
			<div class="layui-input-block">
				<select name="shiftId" class="layui-select" lay-filter="shiftId" lay-verify="required" lay-search="true" >
					<option value="">请选择快件类型</option>
					<option   th:each="s:${shifts}" th:value="${s.dictId}"  th:text="${s.dictItemName}" ></option>
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">物品类型</label>
			<div class="layui-input-block">
				<select name="itemId" class="layui-select" lay-filter="itemId" lay-verify="required" lay-search="true" >
					<option value="">请选择物品类型</option>
					<option   th:each="i:${items}" th:value="${i.dictId}"  th:text="${i.dictItemName}"></option>
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">最低费用</label>
			<div class="layui-input-block">
				<input type="text" name="minPrice" placeholder="请输入最低费用" autocomplete="off" class="layui-input"
					   lay-verify="required">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">附加费用</label>
			<div class="layui-input-block">
				<input type="text" name="additionalCharge" placeholder="请输入附加费用" autocomplete="off" class="layui-input"
					   lay-verify="required">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">客户类型</label>
			<div class="layui-btn layui-inline"><a href="javascript:void(0);" id="change">切换客户类型</a></div>
			<div class="layui-input-block" id="ordinary" >
				<select name="customerId" class="layui-select" lay-filter="customerId" lay-search="true" >
					<option value="">普通客户</option>
					<!--<option th:each="s:${send}" th:value="${s.id}"  th:text="${s.rangeName}" ></option>-->
				</select>
			</div>
			<div class="layui-input-block" id="senior" style="display:none;">
				<select name="customerId" class="layui-select" lay-filter="customerId"  lay-search="true" >
					<option value="">请选择高级客户</option>
					<option th:each="c:${customers}" th:value="${c.clientId}"  th:text="${c.clientName}" ></option>
				</select>
			</div>
		</div>

		<div class="box" style="display: flex;justify-content: space-between;align-items: center">
			<span class="line" style="height: 1px;flex-grow: 1;background-color: #00AA91"></span>
			<span class="text" style="margin: 0 5px">计算公式</span>
			<span class="line" style="height: 1px;flex-grow: 1;background-color: #00AA91"></span>
		</div>
		<div class="layui-collapse">
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">计算公式说明</h2>
				<div class="layui-colla-content layui-show">
					<p style="font-family:verdana;color:#FF6666">
					符号说明：
						计算公式：重量为W,保价费用为I,服务费用为S,附加费用为O,加(+),减(-),乘(*),除(/),
						重量段：大于(>),大于等于(>=),小于(<),小于等于(<=),
						请按照以上要求书写，否则不予识别。
					</p>
				</div>
			</div>
		</div>
		<input type="button" class="layui-btn layui-btn-sm " id="add-btn"  value="新增"/>
		<input type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="del-btn"  value="删除"/>

		<div id="containers" class="form-group" style="display:none;" >
			<div class="layui-form-item">
				<label class="layui-form-label">重量段</label>
				<div class="layui-input-block">
					<input type="text" name="weight"  placeholder="请按照要求输入重量范围" autocomplete="off" class="layui-input"
						   lay-verify="required">
				</div>
			</div>
			<div class="layui-form-item" >
				<label class="layui-form-label">计算公式</label>
				<div class="layui-input-block">
					<input type="text" name="formula"  placeholder="请输入计算公式" autocomplete="off" class="layui-input"
						   lay-verify="required">
				</div>
			</div>
		</div>

		<div id="appends">

		<div id="container" class="form-group"  th:each="formula,formualStat:${formulas}"
		 th:attr="id='container'+${formualStat.index}">
			<div class="layui-form-item">
				<label class="layui-form-label">重量段</label>
				<div class="layui-input-block">
					<input type="text" name="weight" th:value="${formula[0]}" placeholder="请按照要求输入重量范围" autocomplete="off" class="layui-input"
						   lay-verify="required">
				</div>
			</div>
			<div class="layui-form-item" >
				<label class="layui-form-label">计算公式</label>
				<div class="layui-input-block">
					<input type="text" name="formula" th:value="${formula[1]}" placeholder="请输入计算公式" autocomplete="off" class="layui-input"
						   lay-verify="required">
				</div>
			</div>
		</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</div>
<!--js逻辑-->
<script src="/lib/layui/layui.js"></script>
<script type="text/javascript" th:inline="javascript">
	var initData;

	function initForm(data) {
		var jsonString = JSON.stringify(data);
		initData = JSON.parse(jsonString);
	}

	layui.use(["element", "form", "okLayer", "okUtils","jquery"], function () {
		var form = layui.form;
		var okLayer = layui.okLayer;
		var okUtils = layui.okUtils;
		 $ = layui.jquery;
		okLoading.close();
		form.val("form", initData);
		if(initData != null) {
			// 更新页面时候的操作
			// 选中下拉框中的值
			$().ready(function () {
				var single1 = [[${shiftName}]];
				$("#shiftId option[text= " + single1 + "]").prop("selected", true);
			});
			$().ready(function () {
				var single2 = [[${itemName}]];
				$("#itemId option[text= " + single2 + "]").prop("selected", true);
			});
			// 当编辑的时候为了显示客户类型操作，
			$().ready(function () {
				var single3 = initData.customerName;
				var customerType =initData.customerType;
				var customerId = initData.customerId;
				/*console.log("customerName==="+initData.customerName);
				console.log("customerType==="+initData.customerType);
				console.log("customerId==="+initData.customerId);*/
				if(customerType != 1){
					// 当编辑取值的时候，customerType == null即客户类型为普通客户
					// 高级客户下拉框隐藏
					$('#senior').hide();
					// 普通客户下拉框显示
					$('#ordinary').show();
				} else {
					// 反之
					// 普通客户下拉框隐藏
					$('#ordinary').hide();
					// 高级客户下拉框显示
					$('#senior').show();
					// 将对应的高级客户的值被选中，因为普通客户没有具体下拉框，可以省略普通客户的这一步
					$("#customerId option[text = " + single3 + "]").prop("selected",true);
				}
				//$("#destinationAreaId option[text= " + single + "]").prop("selected", true);
			});
			// 对detail_div进行初始化操作，更新时id应该为计算公式的数据长度
			var fos = [[${formulas}]];
			var	detail_div = fos.length;
			console.info("开始："+detail_div);
			// 将containers模版进行设置（更新的时候属性不是必填项，因为时隐藏的填不了）
			$("#containers input[name = 'weight']").removeAttr("lay-verify");
			$("#containers input[name = 'formula']").removeAttr("lay-verify");


		}else{
			// 新增页面时候的操作,初始化detail_div为1
			var detail_div = 1;
			// 将模板显示
			$('#containers').show();
		}

		form.on("submit(add)", function (data) {
			var quotationCalculationFormula = '';
				for(var i = 0 ; i < detail_div;i++){
					if(initData != null){
						// 编辑
						console.info("编辑操作")
						var v1 = $("#container" + i + " input[name = 'weight']").val();
						var v2 = $("#container" + i + " input[name = 'formula']").val();
					}else {
						// 新增
						console.info("新增操作")
						if(i == 0) {
							var v1 = $("#containers input[name = 'weight']").val();
							var v2 = $("#containers input[name = 'formula']").val();
						}else {
							var v1 = $("#container" + i + " input[name = 'weight']").val();
							var v2 = $("#container" + i + " input[name = 'formula']").val();
						}
					}
					quotationCalculationFormula += v1 +","+v2+"_";
				}
			quotationCalculationFormula = quotationCalculationFormula.substring(0,quotationCalculationFormula.length-1);
			data.field.quotationCalculationFormula = quotationCalculationFormula;
			console.info("offerTypeId===>"+[[${offerTypeId}]]);
			console.info("data.field.serialId===>"+data.field.serialId);

			if(data.field.serialId ==''){
				console.info("offerTypeId===>"+[[${offerTypeId}]]);
				data.field.offerTypeId = [[${offerTypeId}]];
			}
			data.field.offerName = data.field.shiftId;
			console.info( "data"+data.field);
			okUtils.ajax("/api/quote/rule/handle", "post", data.field, true).done(function (response) {
				console.log(response);
				okLayer.greenTickMsg("操作成功", function () {
					parent.layer.close(parent.layer.getFrameIndex(window.name));
					layer.close(layer.index);
				});
			}).fail(function (error) {
				console.log(error)
			});
			return false;
		});

	// 客户类型高级客户与普通客户之间的切换

		$(function () {
			$("#change").click(function () {
				console.info("切换");
				$('#ordinary').toggle();
				$('#senior').toggle();
			})
		})


		// 新增div,按钮点击事件
		$("#add-btn").click(function () {
			// 根据id找到div所在的位置
			var e = document.getElementById("containers");
			// 创建一个div
			var div = document.createElement("div");
			// div的初始化操作（设置className,id.html内容）
			div.className = "form-group";
			div.id = "container" + detail_div;
			div.innerHTML = e.innerHTML;
			// 将这个div拼接到（id=appends的div之中）会自动拼接到当前div里面的内容之后
			document.getElementById("appends").appendChild(div);
			// 将新增的属性设置为必填
			$("#container" + detail_div + " input[name = 'weight']").attr("lay-verify","required");
			$("#container" + detail_div + " input[name = 'formula']").attr("lay-verify","required");
			// 将detail_div++为的是对接下来的新增或者删除操作方便设置id
			detail_div++;
		})

		// 删除div，按钮点击事件
		$("#del-btn").click(function () {
			// 判断条件只能让其删除到id=container1,就不能继续删除了
			if(detail_div > 1){
				// 拼接id,找到id所对应的div
				var id = "container" + (detail_div - 1).toString();
				var e = document.getElementById(id);
				// 在id=appends的div中删除子div
				document.getElementById("appends").removeChild(e);
				detail_div--;
				console.info("del+"+detail_div);
			}

		})


	});



</script>
</body>
</html>
